<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Python web开发作业</title>
    <style type="text/css">
        body,div,span,a,h1,h2,h3,h4,h5,h6,ul,li,ol,table,tr,td,th,p,img{margin: 0px;padding: 0px}/*清除内外补白*/
        ul,ol,li{list-style: none}/*删除列表样式*/

        #container{width: 100%;height: 60px;background-color: wheat;background-repeat: repeat-x ;background-size: 0px 0px}/*设置导航栏宽度为100%高度60px背景颜色为wheat背景大小0px 0px*/
        #container ul li{width: 100px;float: left ;line-height: 40px;margin-left: 40px}/*设定每个链接宽度为100px靠左浮动行高40px外边距距左边40px*/
        #container ul li a{color: black;font-size: 16px;line-height: 50px;text-align: center;text-decoration: none}/*设定没有鼠标的时候的css样式*/
        #container ul li a:hover{color: white;font-size: 19px;line-height: 50px;text-align: center;text-decoration: none}/*设定有鼠标的时候的css样式*/
        .img{width: 700px;height: 700px}/*设置图片的宽高*/
        .name{margin-top: 5000px;margin-right: 50px}/*设置商品名称*/
        #block1{width: 750px;height: 700px;float: right;background-color: whitesmoke;margin-right: 150px}/*设置区块1*/
        #nav{height: 70px;width: 100%;background-color: #ededed;border-color: #ededed;background-size: 1px;border: solid}/*设置导航栏公共样式*/
        #nav h2{margin-left: 0px;float: left}/*设置导航栏h2标签样式*/
        #nav h3{margin-right: 0px;float: right}/*设置导航栏h3标签样式*/
        .orange{color: #ff8a04;margin-top: 5px}/*设置字体颜色和顶部距离*/
        .slogin{margin-top: 5px}/*设置广告语顶部距离*/
        #gift{color: white;background-color: #ff8a04;width: 40px;float: left}
        #gift_content{float: left;padding-left: 20px}
        #address{margin-top: 0px;background-color: #e5e5e5;float:left;padding-left: 15px;border: 1px solid;border-color: #d0d0d0;margin-top: 50px;margin-left: 100px;width: 70%;height: 100px;}
        .detail{padding-top:20px;width: 13px;height: 15px;margin-top: 15px}
        #link{color: #ff8a04;margin-left: 5px}
        #g{color: #ff8a04;padding-bottom: 5px}
        .top_nav{float: right;color:black;margin-top: 17px}
        #color{color: black;float: left;margin-top: 5px;font-size: 18px;margin-left: 15px}
        #nav h2{margin-left: 10px;margin-top: 15px}
        .hh{padding-right: 15px}
        #server{margin-top: 50px;width: 1000px}
        #server_item{width: 100%;height: 50px;border-color: gray ;background-repeat: repeat-x;background-size: 0px 0px;margin-left: 40%}
        #server_item ul li{width: 135px;float: left;line-height: 40px;margin-left: 30px;text-decoration: none}
        #server_item ul li a{color: black;font-size: 17px;line-height: 30px;text-align: center;text-decoration: none;width: 200px;text-decoration: none}
        #server_item ul li a:hover{color: #ff8a04;font-size: 17px;line-height: 30px;text-align: center;text-decoration: none;width: 100px;text-decoration: none}/*清除标记符*/
        .top{float: left;margin-top: 20px;margin-left: 20px}
        .main{color: black;font-size: 15px;margin-left: 20px;text-decoration: none}
        .second{margin-top: 20px;margin-bottom: 20px;color: gray;margin-left: 20px;text-decoration: none}
        #other{margin-left: 30%}
        .phone{color: #ff8a04;font-size: 20px;margin-left: 20px;}
        #phone1{margin-left: 15px;padding-right: 30px;float: right;margin-right: 10%;margin-top: 5px}
        .date{margin-left: 20px;padding-right: 30px;}
        #money{float: right}
        #type{margin-left: 10px;}
        #total{color: #ff8a04;font-size: 20px;margin-left: 10px;margin-top: 60px}
        #buy{width: 298px;height: 52px;background-color: #ff8a04;margin-top: 30px;margin-left: 10px}
        .buy{margin-left: 50px;padding-top: 50px;margin-top: 20px;float: top;color: white;font-style: normal;text-decoration: none}
    </style>
</head>
<body>

    <div id="container"><!--创建导航栏-->
        <ul>
            <!--导航栏链接项-->
            <li><a href="#">全部商品分类</a></li>
            <li><a href="#">小米手机</a></li>
            <li><a href="#">红米</a></li>
            <li><a href="#">电视</a></li>
            <li><a href="#">笔记本</a></li>
            <li><a href="#">家电</a></li>
            <li><a href="#">新品</a></li>
            <li><a href="#">路由器</a></li>
            <li><a href="#">智能硬件</a></li>
            <li><a href="#">服务</a></li>
            <li><a href="#">社区</a></li>
        </ul>
    </div>

<div id="nav">
    <!--创建标题栏-->
    <h2>米家自动洗手机套装</h2>
    <span>|</span>
    <a href="#" class="top_nav hh">概述</a>
    <span class="top_nav">|</span>
    <a href="#" class="top_nav">参数</a>
    <span class="top_nav">|</span>
    <a href="#" class="top_nav">F码通道</a>
    <span class="top_nav">|</span>
    <a href="#" class="top_nav ">用户评价</a>


</div>
<!--网页主框架-->
<img class="img" src="pms_1538028945.15163301.jpg"><!--导入商品图片-->
    <div id="block1" >
        <span class="name">米家自动洗手机套装</span><!--商品名称-->
        <p class="slogin">免接触更卫生 / 99.9%有效抑菌 / 植物精华，滋润舒适</p><!--广告语-->
        <p class="orange">小米自营</p>
        <p class="orange">79元</p>
        <br><br>
        <p id="gift">赠品</p><!--赠品-->
        <span id="gift_content">赠米粉卡，最高含100元话费</span>
        <br>
        <!--地址栏-->
        <div id="address">
            <br>
            <span class="detail">北京</span>
            <span class="detail">北京市</span>
            <span class="detail">东城区</span>
            <span class="detail">永定门外街道</span>
            <a href="#" id="link">修改</a>
            <p></p>
            <br>
            <p id="g">有现货</p>

        </div>
        <p></p>
        <br>
        <br><br><br><br><br><br><br>
        <span></span>
        <h4 id="color">选择颜色</h4>
        <br><br>
        <div>
            <!--价格栏-->
            <span id="type">米家自动洗手机套装 白色</span><span id="money">79 元</span>
            <p id="total">总计 ：79元</p>
        </div>
        <li id="buy">
            <br>
            <a href="#" class="buy">加入购物车</a>
        </li>
        <li id="like">
            <a href="#" class="like"></a>
        </li>
    </div>

<div>
    <div id="server">
        <!--底部信息栏-->
        <div id="server_item">
            <ul>
                <!--相关信息-->
                <li><a href="#">预约维修服务</a></li>
                <li><a href="#">7天无理由退货</a></li>
                <li><a href="#">15天免费换货</a></li>
                <li><a href="#">满150元包邮</a></li>
                <li><a href="#">520余家售后网点</a></li>
            </ul>
        </div>

    </div>
    <!--有关服务-->
    <br><br><br>
    <div id="other">
        <div class="top">
            <ul>
                <li><a href="#" class="main">帮助中心</a></li>
                <li><a href="#" class="second">账户管理</a> </li>
                <li><a href="#" class="second">购物指南</a> </li>
                <li><a href="#" class="second">订单操作</a> </li>
            </ul>
        </div>
        <div class="top">
            <ul>
                <li><a href="#" class="main">服务支持</a> </li>
                <li><a href="#" class="second">售后政策</a> </li>
                <li><a href="#" class="second">自助服务</a> </li>
                <li><a href="#" class="second">相关下载</a> </li>
            </ul>
        </div>
        <div class="top">
            <ul>
                <li><a href="#" class="main">线下门店</a> </li>
                <li><a href="#" class="second">小米之家</a> </li>
                <li><a href="#" class="second">服务网点</a> </li>
                <li><a href="#" class="second">授权体验店</a> </li>
            </ul>
        </div>
        <div class="top">
            <ul>
                <li><a href="#" class="main">关于小米</a> </li>
                <li><a href="#" class="second">了解小米</a> </li>
                <li><a href="#" class="second">加入小米</a> </li>
                <li><a href="#" class="second">投资者关系</a> </li>
            </ul>
        </div>
        <div class="top">
            <ul>
                <li><a href="#" class="main">关注我们</a> </li>
                <li><a href="#" class="second">新浪微博</a> </li>
                <li><a href="#" class="second">官方微信</a> </li>
                <li><a href="#" class="second">联系我们</a> </li>
            </ul>
        </div>
        <div class="top">
            <ul>
                <li><a href="#" class="main">特色服务</a> </li>
                <li><a href="#" class="second">F 码通道</a> </li>
                <li><a href="#" class="second">礼物码</a> </li>
                <li><a href="#" class="second">防伪查询</a> </li>
            </ul>
        </div>
        <br>
        <div id="phone1">
            <span class="phone">400-100-5678</span>
            <p class="date"> 周一至周日 8:00-18:00</p>
            <p class="date">（仅收市话费）</p>
        </div>
    </div>
</div>


</div>
</body>
</html>